import {useEffect,useState} from 'react';
import { NavBar, Space, Toast } from "antd-mobile";
import {
  SendOutline,
  CheckOutline,
  RightOutline,
  ShopbagOutline,
} from "antd-mobile-icons";
import {useLocation} from "react-router-dom"
import {filterImg} from "../tools"
import { lodaNumChange, randomPrd } from "../serves/LodaCart";
import {useHistory} from "react-router-dom"

function Orderdetail() {
  const { state } = useLocation();
  const [ranList, setRanList] = useState([]); //随机商品列表
  const {push,go} =useHistory()
  let data = state.data.data;
  console.log(data);
  const ranPrd = (remove = false) => {
    randomPrd().then((r) => {
      if (remove && Array.isArray(remove)) {
        let newarr = r.splice(0, remove.length);
        setRanList(
          ranList
            .filter((item) => {
              return remove.indexOf(item.id) == -1;
            })
            .concat(newarr)
        );
        return;
      } else {
        setRanList(r);
      }
    });
  };
  useEffect(()=>{
    ranPrd()
  },[])
  return (
    <div className="orderdetail">
      <NavBar
        style={{ color: "#fff" }}
        right={<SendOutline color="#fff" fontSize={16} />}
        className="orderDetailTop"
        onBack={()=>{
          go(-1)
        }}
      />
      <div className="ordercontent">
        <div className="detailTop"></div>
        <div className="sutost">
          <CheckOutline />
          <span>已经支付</span>
        </div>
        <div className="address">
          <h3>张三 112****5666</h3>
          <p>河南省郑州市，高新区xxxx河南省郑州市河南省</p>
          <span className="jiantou">
            <RightOutline />
          </span>
        </div>
        <ul className="products">
          {data.map((item) => (
            <li key={item.id}>
              <img src={filterImg(item.product.coverImage)} alt="" />
              <p>
                {item.product.name.length > 20
                  ? item.product.name.substr(0, 20) + "..."
                  : item.product.name}
              </p>
              <span>x{item.amount}</span>
              <div>
                {(item.amount * 100 * (item.product.price * 100)) / 10000}元
              </div>
            </li>
          ))}
        </ul>
        <div className="yingfumoney">
          <p>
            <span>订单金额</span>
            <span>￥666</span>
          </p>
          <p>免运费</p>
        </div>
        <div className="shifumoney">
          <span>实付金额</span>
          <span>￥777</span>
        </div>
        <div className="tuijian">
          <h4 className="tj-tit">为您推荐</h4>
          <fieldset className="tj-tit2">
            <legend>实时推荐你的心心念念</legend>
          </fieldset>
          <div className="tj-prd">
            {ranList.map((item) => (
              <div className="item" key={item.id}>
                <div className="img">
                  <img src={filterImg(item.coverImage)} alt="" />
                  <span className="haop">{item.onSale}人好评</span>
                  {/*  */}
                </div>
                <p className="name">
                  {item.name.length > 12
                    ? item.name.substr(0, 12) + "..."
                    : item.name}
                </p>
                <p className="desc">{item.desc}</p>
                <p className="price">
                  ￥{item.price}
                  <span
                    className="addCart"
                    onClick={() => {
                      lodaNumChange(item.id, 1).then((r) => {
                        if (r.code === -1) {
                          Toast.show({
                            icon: "fail",
                            content: "请先登录",
                          });
                        } else if (r.code === 1) {
                          Toast.show({
                            icon: "success",
                            content: "添加成功",
                          });
                          ranPrd([item.id]);
                        }
                      });
                    }}
                  >
                    {" "}
                    {<ShopbagOutline />}
                  </span>
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="orderBottom"><button className="outPlay">申请退款</button></div>
    </div>
  );
}

export default Orderdetail;
